<template>
  <view>
    <view class="reg_wrapper">
      <view class="field_cell_group">
        <view class="field_cell">
          <label>
            <input
              class="reg_field"
              type="text"
              placeholder="请输入邮箱"
              autocomplete="off"
              v-model="email"
            />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
              class="reg_field"
              type="number"
              placeholder="请输入验证码"
              autocomplete="off"
              v-model="code"
            />
          </label>
          <button class="reg_get_btn" @click="sendEmail" :style="'color:'+sendEmailBtnTextColor">
            {{ sendEmailBtnText }}
          </button>
        </view>
        <view class="field_cell">
          <label>
            <input
              class="reg_field"
              password
              placeholder="新密码"
              autocomplete="off"
              v-model="password"
            />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
              class="reg_field"
              password
              placeholder="确认密码"
              autocomplete="off"
              v-model="repeatPassword"
            />
          </label>
        </view>
      </view>
	  <view class="btn_group">
		  <view class="btn login_btn" @click="handleSubmit">提交</view>
		  <view class="btn login_reg" @click="$emit('changeMethod', 'mobile')">手机找回密码</view>
	  </view>
    </view>
	<TopTips ref="TopTips"></TopTips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import {mapState} from 'vuex'
export default {
  name: 'FindPwdByEmail',
  props: ['utype'],
  data () {
    return {
      checked: true,
      email: '',
      code: '',
      password: '',
      repeatPassword: '',
      regularEmail: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    }
  },
  computed:{
	...mapState({
		sendEmailBtnTextColor:state=>state.sendEmailBtnTextColor,
		sendEmailBtnText:state=>state.sendEmailBtnText
	})  
  },
  mounted () {
    this.$store.commit('clearCountDownFunEmail')
  },
  methods: {
    // 提交之前的验证
    handleSubmit () {
      if (!this.email) {
		this.$refs.TopTips.show({
			title: '请输入邮箱',
			type: 'error',
		})
        return false
      }
      if (!this.regularEmail.test(this.email)) {
		this.$refs.TopTips.show({
			title: '邮箱格式不正确',
			type: 'error',
		})
        return false
      }
      if (!this.code) {
		this.$refs.TopTips.show({
			title: '请输入验证码',
			type: 'error',
		})
        return false
      }
      if (!this.password) {
		this.$refs.TopTips.show({
			title: '请输入新密码',  
			type: 'error',
		})
        return false
      }
      if (!this.repeatPassword) {
		this.$refs.TopTips.show({
			title: '请再次确认密码',
			type: 'error',
		})
        return false
      }
      if (this.password !== this.repeatPassword) {
		this.$refs.TopTips.show({
			title: '两次输入的密码不一致',
			type: 'error',
		})
        return false
      }
      let postData = {
        email: this.email,
        code: this.code,
        password: this.password,
        utype: this.utype
      }
      http
        .post(api.set_pwd_byemail, postData)
        .then(res => {
          if (parseInt(res.data.code) === 200) {
            this.$store.commit('clearCountDownFunEmail')
            this.$emit('handlerFinish')
          } else {
			this.$refs.TopTips.show({
				title: res.data.message,
				type: 'error',
			})
            return false
          }
        })
        .catch(() => {})
    },
    // 发送验证码
    sendEmail () {
      if (this.$store.state.sendEmailBtnDisabled) {
        return false
      }
	  console.log(this.email)
      if (!this.email) {
		this.$refs.TopTips.show({
			title: '请输入邮箱',
			type: 'error',
		})
        return false
      }
      if (!this.regularEmail.test(this.email)) {
		this.$refs.TopTips.show({
			title: '邮箱格式不正确',
			type: 'error',
		})
        return false
      }
      this.$store
        .dispatch('sendEmailFun', {
          url: api.sendmail_forget,
          email: this.email,
          type: this.utype
        })
        .then(res => {
          if (res.code === 200) {
			this.$refs.TopTips.show({
				title: this.$store.state.sendEmailMessage,
				type: 'success',
			})
          } else {
			this.$refs.TopTips.show({
				title: this.$store.state.sendEmailMessage,
				type: 'error',
			})
            return false
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>